<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view class="page-bgf" v-show="!loadingone">
			<u-navbar :background="background" back-icon-color="#fff">
				<view class="slot-wrap">
					<!-- <view class="search-wrap" > -->
					<u-search bg-color="#fff" v-model="searchValue" @change="change" @custom="custom" @search="custom"
						shape="round" :clearabled="true" :show-action="false" input-align="left" @clear="clear"
						placeholder="请输入您要搜索的内容" @focus="focus"></u-search>
					<!-- </view> -->
				</view>
			</u-navbar>
			<view class="box-food" v-if="isSearch==1">
				<view style="display: flex;justify-content: space-between;flex-wrap: wrap;">
					<block v-for="(item,idx) in foodLit" :key="idx">
						<view class="foodviewS" @tap.stop="navtop(item,idx)">
							<view class="foodImage" >
								<image style="width: 100%;height: 100%;" :src="item.foodClassImage" mode="scaleToFill"></image>
								<!-- <u-lazy-load height="180"  img-mode="aspectFill" :image="item.foodClassImage">
								</u-lazy-load> -->
							</view>
							<view class="food-title" :class="'background'+idx" style="background: #C4AE7C;">
								{{item.name}}
							</view>
						</view>
					</block>
					<view class="foodviewS">

					</view>
				</view>
			</view>
			<!-- 热门搜索 -->
			<view v-if="isSearch ==2">
				<view class="SearchTitle weui-flex">
					<view class="titlel">
						搜索历史
					</view>
					<view class="deleteIcon" @tap="deleteTab()">
						<uni-icons type="trash" :color="true?'#000':'#8f8f94'" size="20" />
					</view>
				</view>
				<view v-if="HistoryArr.length == 0" style="margin: 20upx; color: #333;font-size: 28upx;">
					暂无搜索历史
				</view>
				<block v-for="(item,idx) in HistoryArr" :key="idx">
					<view class="historyView" @tap="tapitem(item,idx)">
						{{item.searchName}}
					</view>
				</block>
				<!-- 热门 -->
				<view class="SearchTitle">
					<view class="titlel">
						热门搜索
					</view>
				</view>
				<block v-for="(item,idx) in hotArr" :key="idx">
					<view class="historyView" @tap="tapitem(item,idx)">
						{{item.searchName}}
					</view>
				</block>
			</view>
			<!-- 搜索结果 -->
			<view v-if="isSearch==3">
				<scroll-view scroll-y style="height: 100vh;" @scrolltolower="scrolltolowerB">
					<view>

						<block v-for="(item,idx) in searchto" :key="idx">
							<view class="searchtoView" @tap.stop="clickItem(item)">
								{{item.food}}
							</view>
							<u-line v-show="idx !=searchto.length-1" />
						</block>
						<view class="noData" v-if="searchto.length ==0">
							<view class="noDataicon">

							</view>
							暂无数据
						</view>
						<view style="height: 300upx;"></view>
					</view>
				</scroll-view>

			</view>
			<!-- {{searchto}}
			{{isSearch}} -->
			<!-- end -->
		</view>
	</view>
</template>

<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"

import uSearch from "@/uview-ui/components/u-search/u-search.vue"

	export default {
		components: {
			uLoading,
			uNavbar,
			uSearch,
			uLine
		},
		data() {
			return {
				loadingone: false, //懒加载
				searchto: [],
				pageCurrent: 1, //分页
				pageSize: 10, //分页加载条数
				hotArr: [], //热门
				HistoryArr: [], //历史
				isSearch: 1,
				searchValue: '',
				foodLit: [],
				background: {
					background: 'url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png) no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: 'cover',
				}
			}
		},
		onLoad() {
			this.dataFoodClass('', 1, 100)
		},
		methods: {
			scrolltolowerB(){
					console.log('触发了底部')
					this.dataFood(this.keyword, this.pageCurrent+=1, this.pageSize, false)
			},
			// onReachBottom : function() { //分页加载
			// 	console.log('触发了分页')
			// 	this.dataFood(this.keyword, this.pageCurrent, this.pageSize, false)
			// },
			deleteTab() {
				this.removeUserId();
			},
			removeUserId() {
				let fdata = {
						removeUserId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					},
					_this = this;
				this.$api.delete(global.apiUrls.removeUserId, fdata)
					.then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: '清空成功',
								duration: 2000
							});
							_this.isSearch = 1
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					})
			},
			// 搜索点击
			tapitem(item, idx) {
				this.searchValue = item.searchName; //name
				this.keyword = item.searchName; //当前搜索值
				this.custom()
			},
			// 历史搜索
			getNearestSearch(pageCurrent, pageSize, searchName) {
				let _this = this;
				this.$api.get(global.apiUrls.getNearestSearch + '?keyword=&pageCurrent=' + pageCurrent + '&pageSize=' +
						pageSize + '&searchName=' + searchName + '&searchNum=&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z')
						.userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							_this.HistoryArr = records; //历史搜索
						}
					})
			},
			// 热门
			getHotSearch() {
				let _this = this;
				this.$api.get(global.apiUrls.getHotSearch, {})
					.then(res => {
						if (res.data.code == 1000) {
							let horArr = [],
								result = res.data.result;
							for (let i = 0; i < result.length; i++) {
								if (result[i]) {
									horArr.push(result[i])
								}
							}
							_this.hotArr = horArr

						}
					})
			},
			tbFoodSearch(searchName, searchNum) {
				let _this = this;
				let fdata = {
					searchName: searchName,
					searchNum: searchNum,
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
				}
				this.$api.post(global.apiUrls.tbFoodSearch, fdata)
					.then(res => {})
			},
			clickItem(e) {
				uni.navigateTo({
					url: '/pages/subpackage/find/foodMaterial/foodMaterial?id=' + e.id + '&count=4'
				})
			},
			focus(e) { //获取焦点
				if (e == '') {
					this.isSearch = 2;
					this.getNearestSearch(1, 10, e) //最近搜索
					this.getHotSearch() //热门搜索
				}
			},
			clear(e) { //删除搜索
				this.isSearch = 1;
			},
			change(e) { //改变
				this.keyword = e //当前搜索值
				if (e == '') {
					this.isSearch = 2;
				} else {
					this.isSearch = 3;
				}
			},
			// 获取饮食分类
			dataFoodClass(keyword, pageCurrent, pageSize) {
				this.loadingone = true;
				let _this = this;
				this.$api.get(global.apiUrls.dataFoodClass + '?keyword=' + keyword + '&pageCurrent=' + pageCurrent +
						'&pageSize=' + pageSize, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							_this.foodLit = records
							_this.loadingone = false;
						} else {
							_this.loadingone = false;
						}
					})
			},
			navtop(item, idx) {
				uni.navigateTo({
					url: '/pages/subpackage/find/foodIngredient/foodIngredient?id=' + item.id + '&index=' + idx
				})
			},
			dataFood(keyword, pageCurrent, pageSize, concatBr) {
				let _this = this;
				this.$api.get(global.apiUrls.dataFood + '?keyword=' + keyword +
						'&pageCurrent=' + pageCurrent + '&pageSize=' + pageSize, {})
					.then(res => {
						if (res.data.code == 1000) {
							if (concatBr) { //搜索
								let records = res.data.result.records;
								_this.searchto = records
							} else { //分页触发
								let records = res.data.result.records;
								_this.searchto = _this.searchto.concat(records)
							}

						}
					})
			},
			// 用户搜索
			custom() {
				this.tbFoodSearch(this.keyword, '');
				this.dataFood(this.keyword, this.pageCurrent, this.pageSize, true)
			}
		}
	}
</script>

<style lang="scss">
	.background0 {
		background: linear-gradient(180deg, #EA9200 0%, #F3B800 100%);
	}

	.background1 {
		background: #D3D729;
	}

	.background2 {
		background: #FFB17E;
	}

	.background3 {
		background: #81C042;
	}

	.background4 {
		background: #C4AE7C;
	}

	.background5 {
		background: #F5A623;
	}

	.background6 {
		background: #9F4913;
	}

	.background7 {
		background: #FF333A;
	}

	.background8 {
		background: #8E7E5D;
	}

	.background9 {
		background: #C5C3C6;
	}

	.background10 {
		background: #D0A265;
	}

	.background11 {
		background: #2EA7E0;
	}

	.background12 {
		background: #C37A3F;
	}

	// 不够从头开始添加
	.background13 {
		background: linear-gradient(180deg, #EA9200 0%, #F3B800 100%);
	}

	.background14 {
		background: #D3D729;
	}

	.background15 {
		background: #FFB17E;
	}

	.background16 {
		background: #81C042;
	}

	.background17 {
		background: #C4AE7C;
	}

	// end

	.box-food {
		width: 720upx;
		margin: 0 auto;
	}

	.foodviewS {
		width: 149upx;
		margin: 40upx 16upx 19upx;
		border-radius: 20upx;
		overflow: hidden;
	}

	.foodImage {
		width: 149upx;
		height: 180upx;
	}

	.food-title {
		height: 63upx;
		line-height: 63upx;
		text-align: center;
		color: #fff!important;
	}

	.SearchTitle {
		width: 710upx;
		margin: 0 auto;
		height: 105upx;
		line-height: 105upx;
		font-size: 28upx;
		font-weight: 400;
		color: #000000;
	}

	.titlel {
		width: 660upx;
	}

	.historyView {
		display: inline-block;
		padding: 14upx 44upx;
		background: #F9F9F9;
		margin: 0 0 20upx 20upx;
		border-radius: 35upx;
		color: #6E6E6E;
	}

	.searchtoView {
		width: 750upx;
		height: 170upx;
		font-size: 28upx;
		font-weight: 500;
		color: #333333;
		line-height: 170upx;
		padding: 0 24upx;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

	.searchtoView::before {
		content: '';
		width: 30upx;
		height: 36upx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 30upx;
		background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 30upx 36upx;
	}

	.noData {
		font-size: 30upx;
		font-weight: 500;
		color: #9B9B9B;
		line-height: 42upx;
		text-align: center;

		.noDataicon {
			width: 213upx;
			height: 209upx;
			background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
			background-size: 213upx 209upx;
			margin: 400upx auto 30upx;
		}
	}
</style>
